import { message } from 'antd';
import styles from './index.less';
import { formatSizeUnits } from '@/utils';

const Index = ({ onClose, attachs }) => {
  console.log(attachs, '2222');
  const copyUrl = (text) => {
    const input = document.createElement('textarea');
    input.setAttribute('id', '__mouse__position_input');
    input.style.transform = 'translateY(-999999999px)';
    input.value = text;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    message.success('复制成功');
  };
  return (
    <div>
      <div className={styles.mask} />
      <div className={styles.main}>
        <div className={styles.header}>
          <div className={styles.title}>下载课程素材</div>
          <div className={styles.subtitle}>Download course mate</div>
        </div>
        <div className={styles.close} onClick={() => onClose?.()} />
        <div className={styles.body}>
          {attachs?.disk?.length > 0 && (
            <section className={styles.section}>
              <div className={styles.title}>网盘地址：</div>
              {attachs.disk?.map((item) => (
                <div className={styles.diskitem} key={item.attachid}>
                  <div className={styles.name}>
                    {item.filename || '-'}
                    <div className={styles.copy} onClick={() => copyUrl(item.attachment)}>
                      复制
                    </div>
                  </div>
                  <div className={styles.text}>{item.attachment}</div>
                </div>
              ))}
            </section>
          )}
          {attachs?.attach?.length > 0 && (
            <section className={styles.section}>
              <div className={styles.title}>压缩包：</div>
              {attachs.attach?.map((item) => (
                <div className={styles.zipitem} key={item.attachid}>
                  <i className={styles.icon} />
                  <div className={styles.info}>
                    <div className={styles.name}>{item.filename}</div>
                    <div className={styles.size}>{formatSizeUnits(item.filesize)}</div>
                  </div>
                  <div className={styles.button} onClick={() => window.open(item.downfile)}>
                    下载
                  </div>
                </div>
              ))}
            </section>
          )}
        </div>
      </div>
    </div>
  );
};

export default Index;
